<template>
  <a-modal
    v-model:visible="visible"
    style="
      top: 20px;
      border-radius: 10px;
      overflow: hidden;
      width: 70%;
      min-width: 800px;
    "
    centered
    @ok="handleOk(false)"
  >
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane :key="1" tab="我的">
        <!-- 头部筛选 -->
        <a-row type="flex" justify="space-between" style="align-items: center">
          <!-- 左侧筛选 -->
          <a-col style="display: flex">
            <div class="search-left">
              <!-- 素材筛选 -->
              <div class="material-select">
                <a-select
                  allowClear
                  :bordered="false"
                  placeholder="素材"
                  style="
                    min-width: 80px;
                    background-color: #f4f5f5;
                    border-right: 1px solid #ebebeb;
                  "
                >
                  <a-select-option :value="'素材'">素材</a-select-option>
                  <a-select-option :value="'作品'">作品</a-select-option>
                </a-select>
                <a-input
                  placeholder="搜索"
                  allowClear
                  :bordered="false"
                  style="max-width: 200px; background-color: #f4f5f5"
                >
                  <template #prefix>
                    <SearchOutlined />
                  </template>
                </a-input>
              </div>
              <!-- 更多筛选屏幕宽度大于1489px -->
              <div class="more-select-max">
                <a-range-picker
                  v-model:value="dataTime"
                  style="
                    margin-right: 10px;
                    background-color: #f4f5f5 !important;
                  "
                  :bordered="false"
                />
                <a-select
                  placeholder="素材类型"
                  allowClear
                  :bordered="false"
                  style="
                    margin-right: 10px;
                    min-width: 100px;
                    background-color: #f4f5f5;
                  "
                >
                  <a-select-option :value="'视频'">视频</a-select-option>
                  <a-select-option :value="'音频'">音频</a-select-option>
                  <a-select-option :value="'图片'">图片</a-select-option>
                  <a-select-option :value="'文件夹'">文件夹</a-select-option>
                </a-select>
                <a-select
                  v-model:value="selectValue"
                  :options="options"
                  placeholder="尺寸比例"
                  allowClear
                  :bordered="false"
                  style="min-width: 200px; background-color: #f4f5f5"
                  mode="multiple"
                  :maxTagCount="2"
                ></a-select>
              </div>
              <!-- 更多筛选屏幕宽度小于1489px -->
              <div class="more-select-mini">
                <a-popover trigger="click" placement="bottom">
                  <template #content>
                    <div>
                      <div style="font-weight: 600">日期范围：</div>
                      <a-range-picker
                        :bordered="false"
                        v-model:value="dataTime"
                        style="
                          margin: 5px 10px 0 0;
                          width: 240px;
                          background-color: #f4f5f5 !important;
                        "
                      />
                    </div>
                    <div style="margin-top: 10px">
                      <div style="font-weight: 600">素材类型</div>
                      <a-select
                        placeholder="素材类型"
                        allowClear
                        :bordered="false"
                        style="
                          margin: 5px 10px 0 0;
                          width: 240px;
                          background-color: #f4f5f5;
                        "
                      >
                        <a-select-option :value="'视频'">视频</a-select-option>
                        <a-select-option :value="'音频'">音频</a-select-option>
                        <a-select-option :value="'图片'">图片</a-select-option>
                        <a-select-option :value="'文件夹'"
                          >文件夹</a-select-option
                        >
                      </a-select>
                    </div>
                    <div style="margin-top: 10px; font-weight: 600">
                      <div>尺寸比例</div>
                      <a-select
                        :bordered="false"
                        v-model:value="selectValue"
                        :options="options"
                        placeholder="尺寸比例"
                        allowClear
                        style="
                          width: 240px;
                          margin: 5px 10px 0 0;
                          background-color: #f4f5f5;
                        "
                        mode="multiple"
                        :maxTagCount="2"
                      ></a-select>
                    </div>
                  </template>
                  <div class="more-select" placeholder="更多筛选">
                    <span style="width: 120px; text-align: center"
                      >更多筛选</span
                    >
                    <span class="more-select-count">3</span>
                    <DownOutlined style="margin-right: 10px" />
                  </div>
                </a-popover>
              </div>
            </div>
          </a-col>
          <!-- 右侧筛选 -->
          <a-col>
            <a-popover trigger="click" placement="bottom">
              <div style="cursor: pointer">
                <a-select
                  :bordered="false"
                  placeholder="搜索相关度"
                  allowClear
                  style="
                    margin-right: 10px;
                    width: 200px;
                    margin-top: 10px;
                    background-color: #f4f5f5;
                  "
                >
                  <template #suffixIcon
                    ><arrow-down-outlined style="margin-left: 5px"
                  /></template>
                  <a-select-option :value="'搜索相关度'"
                    >搜索相关度</a-select-option
                  >
                  <a-select-option :value="'创建时间'"
                    >创建时间</a-select-option
                  >
                  <a-select-option :value="'编辑时间'"
                    >编辑时间</a-select-option
                  >
                  <a-select-option :value="'名称'">名称</a-select-option>
                </a-select>
              </div>
            </a-popover>
          </a-col>
        </a-row>
        <!-- 素材列表 -->
        <a-row type="flex" justify="center">
          <div class="material-list">
            <div
              class="material-list-item"
              @mouseenter="mouseEnterMerterialHandle"
              @mouseleave="mouseOutMerterialHandle"
              :class="{ selected: isSelected(item.id) }"
              v-for="item in materialList"
              :key="item.id"
            >
              <!-- 图片类型 -->
              <div class="material-item_img" v-if="item.type === 'image'">
                <img :src="item.url" alt="" @click="viewInfoModal(item)" />
                <span class="item-icon-right">
                  <cu-icon
                    type="icon-tupian2"
                    style="font-size: 20px"
                  ></cu-icon>
                </span>
              </div>
              <!-- 音频类型 -->
              <div class="material-item_audio" v-if="item.type === 'audio'">
                <div class="audio" style="cursor: not-allowed"></div>
                <span class="item-icon-right">
                  <cu-icon type="icon-yinle1" style="font-size: 18px"></cu-icon>
                </span>
                <span class="item-icon-center">
                  <cu-icon type="icon-koubo" style="font-size: 30px"></cu-icon>
                </span>
              </div>
              <!-- 文件夹类型 -->
              <div class="material-item_file" v-if="item.type === 'file'">
                <div class="file" @click="showfolderPopupModal(item)">
                  <cu-icon type="icon-wenjianjia1"></cu-icon>
                </div>
              </div>
              <!-- 视频类型 -->
              <div class="material-item_video" v-if="item.type === 'video'">
                <video
                  @click="viewInfoModal(item)"
                  id="myVideo"
                  @mouseenter="videoPlay"
                  @mouseleave="videoPause"
                  src="https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231219/65813eca0699347528.电影8.mp4"
                ></video>
                <span class="item-icon-right">
                  <cu-icon type="icon-24gl-playCircle"></cu-icon>
                </span>
                <span class="item-icon-bottom"> 00:05 </span>
              </div>
              <a-tooltip>
                <template #title> {{ item.name }}</template>
                <div class="item-desc">
                  {{ item.name }}
                </div>
              </a-tooltip>

              <div class="item-time">2024-03-26</div>
              <!-- 遮罩层 start -->
              <div class="item-mask" v-if="isShowMask">
                <div class="checkbox">
                  <a-checkbox
                    :checked="selectedItemsList.includes(item.id)"
                    @change="toggleItem(item.id)"
                  ></a-checkbox>
                </div>
                <div class="upload-btn">
                  <a-button size="small" type="primary">导入</a-button>
                </div>
              </div>
              <!-- 遮罩层 end-->
            </div>
          </div>
        </a-row>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="团队" disabled>
        <!-- <a-empty style="margin-top: 30px" /> -->
        开发中
      </a-tab-pane>
      <a-tab-pane :key="3" tab="素材广场" disabled>
        <!-- <a-empty style="margin-top: 30px" /> -->
        开发中
      </a-tab-pane>
    </a-tabs>

    <template #footer>
      <a-row style="padding: 20px 0">
        <a-pagination
          v-model:current="page"
          simple
          :total="total"
          @change="changePagination"
        />
        <div @click="toggleChecked(true)">本页全选</div>
      </a-row>
      <div v-if="selectedItemsList.length > 0">
        <a-button key="back" @click="toggleChecked(false)">取消全选</a-button>
        <a-button key="submit" type="primary" @click="handleOk"
          >+导入({{ selectedItemsList.length }})</a-button
        >
      </div>
    </template>
  </a-modal>
  <infoModal ref="infomodal" />
  <FolderPopup ref="folderPopup" />
</template>

<script>
import { defineComponent, toRefs, reactive, computed } from "vue";
import {
  SearchOutlined,
  ArrowDownOutlined,
  DownOutlined,
  FileImageOutlined,
  AudioOutlined,
  CustomerServiceOutlined,
} from "@ant-design/icons-vue";
import moment from "moment";
import { message } from "ant-design-vue";
import infoModal from "./infoModal.vue";
import FolderPopup from "./FolderPopup.vue";
import request from "@/common/utils/request";
export default defineComponent({
  components: {
    SearchOutlined,
    ArrowDownOutlined,
    DownOutlined,
    FileImageOutlined,
    AudioOutlined,
    CustomerServiceOutlined,
    infoModal,
    FolderPopup,
  },
  setup() {
    const state = reactive({
      visible: false,
      activeKey: 1,
      materialType: "素材", //素材类型
      sizeRatio: [], //尺寸比例
      dataTime: [],
      selectValue: [],
      options: [
        {
          label: "横版",
          options: [
            {
              value: "16:9",
              label: "16:9",
            },
            {
              value: "4:3",
              label: "4:3",
            },
            {
              value: "2:1",
              label: "21:9",
            },
          ],
        },
        {
          label: "竖版",
          options: [
            {
              value: "9:16",
              label: "9:16",
            },
            {
              value: "3:4",
              label: "1:2",
            },
          ],
        },
        {
          label: "其他",
          options: [
            {
              value: "1:1",
              label: "1:1",
            },
          ],
        },
      ],
      materialList: [
        {
          id: 1,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://aliyuncdn.antdv.com/vue.png",
          type: "image",
        },
        {
          id: 2,
          name: "(短)时间流逝，美丽的阳光洒在清新的绿色森林里_爱给网_aigei_com - Trim.mp4",
          url: "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231219/65813eca0699347528.电影8.mp4",
          type: "video",
        },
        {
          id: 3,
          name: "艾索 - 晚安喵.mp3",
          url: "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231219/65814edc29e0818984.cb262084e8e93b17e11885441ea15da5.m4a",
          type: "audio",
        },
        {
          id: 4,
          name: "旅游风景素材",
          url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          type: "file",
        },
        {
          id: 6,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          type: "image",
        },
        {
          id: 7,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231219/65813eca0699347528.电影8.mp4",
          type: "video",
        },
        {
          id: 8,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231219/65814edc29e0818984.cb262084e8e93b17e11885441ea15da5.m4a",
          type: "audio",
        },
        {
          id: 9,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          type: "file",
        },
        {
          id: 1,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://aliyuncdn.antdv.com/vue.png",
          type: "image",
        },
        {
          id: 2,
          name: "(短)时间流逝，美丽的阳光洒在清新的绿色森林里_爱给网_aigei_com - Trim.mp4",
          url: "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231219/65813eca0699347528.电影8.mp4",
          type: "video",
        },
        {
          id: 3,
          name: "艾索 - 晚安喵.mp3",
          url: "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231219/65814edc29e0818984.cb262084e8e93b17e11885441ea15da5.m4a",
          type: "audio",
        },
        {
          id: 4,
          name: "旅游风景素材",
          url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          type: "file",
        },
        {
          id: 6,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          type: "image",
        },
        {
          id: 7,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231219/65813eca0699347528.电影8.mp4",
          type: "video",
        },
        {
          id: 8,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231219/65814edc29e0818984.cb262084e8e93b17e11885441ea15da5.m4a",
          type: "audio",
        },
        {
          id: 9,
          name: "图片1234 75f2a3ec-125f-4245-9f61-7e06d78cf328-1.jpg",
          url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          type: "file",
        },
      ], //素材列表
      itemChecked: false, //是否选中
      selectedItemsList: [], //选中列表
      page: 1,
      pageSize: 18,
      total: 20,
      isShowMask: false,
      cardType: "file",
      infomodal: null,
      folderPopup: null,
      seatchValue: "",
    });
    // 开启弹窗
    const showModal = () => {
      state.activeKey = 1;
      state.visible = true;
      getlibraryList();
    };
    // 关闭弹窗
    const handleOk = (e) => {
      state.visible = false;
    };
    // 日期选择
    const changeData = () => {
      console.log(moment(state.dataTime[0]).format("YYYY-MM-DD"));
      console.log(moment(state.dataTime[1]).format("YYYY-MM-DD"));
    };
    const toggleChecked = (value) => {
      state.itemChecked = value;
      if (value) {
        state.selectedItemsList = state.materialList.map((item) => item.id);
        state.isShowMask = true;
      } else {
        state.selectedItemsList = [];
        state.isShowMask = false;
      }
    };

    const toggleItem = (itemId) => {
      if (state.selectedItemsList.includes(itemId)) {
        state.selectedItemsList = state.selectedItemsList.filter(
          (id) => id !== itemId
        );
      } else {
        state.selectedItemsList.push(itemId);
      }
    };

    const isSelected = (itemId) => {
      return state.selectedItemsList.includes(itemId);
    };
    // 分页
    const changePagination = (page, pageSize) => {
      state.pageSize = pageSize;
      state.page = page;

      if (state.page * state.pageSize > state.total) {
        message.error("没有更多数据了");
      } else {
        console.log("获取列表");
        // initData(state.page, state.pageSize);
      }
    };
    // 播放视频
    const videoPlay = () => {
      const video = document.getElementById("myVideo");
      video.play();
    };
    // 关闭视频
    const videoPause = () => {
      const video = document.getElementById("myVideo");
      video.pause();
    };
    // 鼠标移入视频播放
    const mouseEnterMerterialHandle = () => {
      state.isShowMask = true;
    };
    // 鼠标移出暂停视频播放
    const mouseOutMerterialHandle = () => {
      if (!state.selectedItemsList.length) {
        state.isShowMask = false;
      }
    };
    // 查看视频/图片详情
    const viewInfoModal = (item) => {
      state.infomodal.showModal(item);
    };
    // 打开文件夹
    const showfolderPopupModal = (item) => {
      state.folderPopup.showModal(item);
    };
    // 请求父级菜单栏
    const getlibraryList = (init = true) => {
      let params = {
        name: state.seatchValue || undefined,
      };
      request
        .get("/work_ai", "/user/shotstack/library/withGroup/list", params)
        .then((res) => {
          if (res.result.length) {
            console.log(res.result);
            res.result.forEach((item) => {
              item.folder_group.forEach((folder, index) => {
                if (index !== 0) {
                  folder.isSetting = true;
                  folder.isLeaf = true;
                }
                folder.id = `${folder.id}-${index}`; //子级id处理 解决数组id一样导致的报错
                folder.name = folder.group_name;
              });
            });
          }
          // 是否 默认一个 或者 不是默认 且 数组长度为1的 (如果单独返回一个的时候)
          if (init || (!init && res.result.length == 1)) {
            state.expandedKeys = [res.result[0].id];
          }
        });
    };
    return {
      ...toRefs(state),
      showModal,
      handleOk,
      changeData,
      toggleChecked,
      toggleItem,
      isSelected,
      changePagination,
      videoPlay,
      videoPause,
      mouseEnterMerterialHandle,
      mouseOutMerterialHandle,
      viewInfoModal,
      showfolderPopupModal,
      getlibraryList,
    };
  },
});
</script>

<style lang="less" scoped>
// 头部筛选样式
.search-left {
  display: flex;
  margin-top: 10px;
}
.material-select {
  display: flex;
  margin-right: 10px;
}
.more-select-max {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.more-select-mini {
  cursor: pointer;
  background-color: #f4f5f5;
  .more-select {
    margin-right: 10px;
    width: 180px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .more-select-count {
      width: 20px;
      height: 20px;
      display: inline-block;
      border-radius: 10px;
      text-align: center;
      line-height: 20px;
      margin: 0 8px;
      background-color: #0064fa;
      color: #fff;
    }
  }
}
// 列表样式

.material-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  // width: 100%;
  min-width: 800px;
  justify-content: center;
  height: 600px;
  overflow-y: scroll;
  .material-list-item {
    border-radius: 5px;
    height: 180px;
    border: 1px solid #dbdddf;
    box-sizing: border-box;
    position: relative;
    margin: 10px 10px 0 0;
  }
  .material-item_img,
  .material-item_audio,
  .material-item_video,
  .material-item_file {
    height: 120px;
    text-align: center;
    background: #f6f6f6;
    box-sizing: border-box;
    position: relative;
    img {
      height: 120px;
      width: contain;
    }
    .file {
      height: 100%;
      width: 100%;
      display: flex;
      font-size: 40px;
      justify-content: center;
      align-items: center;
    }
    .audio {
      width: 100%;
      height: 100%;
    }
    .item-icon-right,
    .item-icon-center {
      position: absolute;
      right: 10px;
      top: 5px;
      font-weight: 600;
      color: #fff;
      width: 20px;
      height: 20px;
      font-size: 20px;
      font-weight: 600;
      // background: #f6f6f6;
    }
  }
  .material-item_audio {
    background: #7f7f7f;

    .item-icon-center {
      top: 50%;
      background: #7f7f7f;
      left: 50%;
      font-size: 20px;
      color: #fff;
      transform: translate(-50%, -50%);
    }
    .item-icon-right {
      font-size: 20px;
      color: #fff;
    }
  }
  .material-item_video {
    background: black;
    video {
      width: 100%;
      height: 120px;
    }
    .item-icon-bottom {
      position: absolute;
      right: 10px;
      bottom: 10px;
      background: #1c1f23;
      height: 20px;
      color: #d5d5d5;
    }
  }

  .item-desc,
  .item-time {
    padding: 3px 10px;
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item-desc {
    font-weight: 600;
  }
  .item-mask {
    position: absolute;
    left: -2px;
    top: -4px;
    width: 100%;
    display: flex;
    .upload-btn {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: end;
    }
  }
}
// 选中样式
.selected {
  border: 2px solid rgb(255, 101, 98) !important;
}
/* 当屏幕宽度大于等于 1200px 时应用的样式 */
@media screen and (min-width: 1489px) {
  /* 在这里添加针对 1200px 及以上屏幕宽度的样式 */
  .more-select-mini {
    display: none;
  }
  .more-select-max {
    display: block;
  }
  .material-list-item {
    width: 19%;
  }
}

/* 当屏幕宽度小于 1199px 时应用的样式 */
@media screen and (max-width: 1488px) {
  /* 在这里添加针对 799px 及以下屏幕宽度的样式 */
  .more-select-mini {
    display: block;
  }
  .more-select-max {
    display: none;
  }
  .material-list-item {
    width: 30%;
  }
}
:deep(.ant-select-selection-overflow) {
  flex-wrap: nowrap !important;
  overflow: hidden;
}
</style>
